<template>
  <div class="flex flex-col w-full md:w-3/4 m-auto pt-[70px]">

    <Breadcrumb :data="form" />

    <ProductShopInfo :data="goods?.merchant" />

    <div class="bg-white p-4 mt-4 flex gap-xl rounded-xl">
      <div class="goods-image flex gap-xl">
        <div class="gap-xs flex flex-col">
          <el-avatar v-for="item in JSON.parse(goods.files)" :src="item.url" size="large" shape="square" />
        </div>
        <el-image :src="goods.image" fit="contain" class="w-2xl h-2xl bg-gray-100 border-radius:30px"></el-image>
      </div>
      <div class="goods-info flex flex-col gap-xs">
        <div class="goods-name text-2xl">{{ goods.goodsName }}</div>
        <div class="goods-price text-2xl red">￥{{ goods.salePrice * goods.num }}</div>
        <div class="text-green-7">购买得积分</div>
        <div class="text-gray-4">配送：无需配送</div>
        <div class="text-gray-4">保障：假一赔四 退货包运费 极速退款</div>
        <div class="text-gray-4">销量： {{ goods.sales }}</div>
        <template v-for="spec in goods.goodsSpecValue">
          <div class="flex items-center">
            <div class="text-gray-4">{{ spec.value }}：</div>
            <el-radio-group v-model="goods.radio">
              <el-radio v-for="(specValue,specIndex) in spec.detail" :label="specIndex" border>{{ specValue }}</el-radio>
            </el-radio-group>
          </div>
        </template>
        <div class="text-gray-4">
          已选中：{{ goods.radio }}
        </div>
        <div class="text-gray-4">
          数量：
          <el-input-number v-model="goods.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
        </div>
        <div class="py-5">
          <el-button-group size="large">
            <el-button type="danger">立即购买</el-button>
            <el-button type="warning">加入购物车</el-button>
          </el-button-group>
          <el-button size="large" class="ml-3">收藏</el-button>
        </div>
      </div>
    </div>
    <div class="content p-4 bg-white mt-4 rounded-xl">
      <el-tabs v-model="activeName" :lazy="true" @tab-click="handleClick">
        <el-tab-pane label="参数信息" name="parameter">
          <el-descriptions class="margin-top" title="参数信息" :column="1" border>
            <el-descriptions-item label="品牌">websoft</el-descriptions-item>
            <el-descriptions-item label="版本">2.0</el-descriptions-item>
            <el-descriptions-item label="开发语言">Java、Vue3、Nuxt</el-descriptions-item>
            <el-descriptions-item label="版本">
              <el-tag size="small">授权版</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="图文详情" name="content">
          <div class="files flex flex-col w-3/4" v-if="goods?.files">
            <el-image v-for="item in JSON.parse(goods.files)" :src="item.url" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="用户评价" name="reviews">用户评价</el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div v-if="!form">
    <el-empty description="404 页面不存在"></el-empty>
  </div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import type {Goods} from "~/api/shop/goods/model";
import Breadcrumb from "~/components/Breadcrumb.vue";
import type {Navigation} from "~/api/cms/navigation/model";

const route = useRoute();
const { query, params } = route;
const { name: productName } = params;
const activeName = ref('parameter');
const rate = ref(4);


// 页面信息
const form = ref<Navigation>();
// 商品信息
const goods = ref<Goods>();

// TODO 请求导航页面数据
const pathName = window.location.pathname;
console.log(pathName)
const split = pathName.split('/');
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/navigation/getNavigationByPath',{
  query: {
    path: pathName
  }
})
if(nav.value?.data){
  form.value = nav.value.data;
}

// TODO 获取商品详情
const { data: info } = await useServerRequest<ApiResult<Goods>>('/shop/goods/' + productName)
goods.value = info.value?.data;


const handleClick = (tab, event) => {
  console.log(tab, event);
}
</script>

<style scoped lang="scss">

</style>
